<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>修改电影</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../layui/css/detail.css">
    <style>
        .imgs{
            margin-left: 110px;
            margin-top: 10px;
            position: relative;
            width:150px;
            height:150px;
            /* display: none; */
        }
        .imgs i{
            position: absolute;
            right: 2px;
            top: 2px;
            color:#fff;
            z-index:1;
            cursor: pointer;
        }
        .imgs::after{
            content: "";
            position:absolute;
            height:20px;
            background:rgba(0,0,0,.5);
            top:0;
            left:0;
            width:100%;
            border-radius: 5px 5px 0 0;
    
        }
        .imgs img{
            width:100%;
            height:100%;
            display: block;
            object-fit: contain;
            border-radius:5px;
            border: 1px solid gray;
            box-sizing: border-box;
        }
    </style>
</head>

<body class="layui-layout-body">

    <div class="layui-body inner-body">

        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title">
            <legend>
                <button class="layui-btn layui-btn-sm">
                    <a href="../../pages/movieManagement.html">返回</a>
                </button>
                修改电影
            </legend>
        </fieldset>

        <form class="layui-form" action="" lay-filter="updateForm" onsubmit="return false">
            <div class="layui-form-item">
                <label class="layui-form-label">电影名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入电影名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">英文名称</label>
                <div class="layui-input-block">
                    <input type="text" name="ename" lay-verify="required" placeholder="请输入电影英文名称" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <label class="layui-form-label">海报图</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="btnPoster">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div class="imgs">
                    <img src="" alt="">
                    <i class="layui-icon layui-icon-close"></i>
                </div>
                <div class="img-input" style="display:none">
                    <input type="text" id="txtimg" name="poster">
                </div>
            </div>
            <!-- 电影类型 -->
            <div class="layui-form-item">
                <label class="layui-form-label">电影类型</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="type" title="爱情" value="爱情">
                    <input type="checkbox" name="type" title="喜剧" value="喜剧">
                    <input type="checkbox" name="type" title="动画" value="动画">
                    <input type="checkbox" name="type" title="剧情" value="剧情">
                    <input type="checkbox" name="type" title="恐怖" value="恐怖">
                    <input type="checkbox" name="type" title="惊悚" value="惊悚">
                    <input type="checkbox" name="type" title="科幻" value="科幻">
                    <input type="checkbox" name="type" title="动作" value="动作">
                    <input type="checkbox" name="type" title="悬疑" value="悬疑">
                    <input type="checkbox" name="type" title="犯罪" value="犯罪">
                    <input type="checkbox" name="type" title="冒险" value="冒险">
                    <input type="checkbox" name="type" title="战争" value="战争">
                    <input type="checkbox" name="type" title="奇幻" value="奇幻">
                    <input type="checkbox" name="type" title="运动" value="运动">
                    <input type="checkbox" name="type" title="家庭" value="家庭">
                    <input type="checkbox" name="type" title="古装" value="古装">
                    <input type="checkbox" name="type" title="武侠" value="武侠">
                    <input type="checkbox" name="type" title="西部" value="西部">
                    <input type="checkbox" name="type" title="历史" value="历史">
                    <input type="checkbox" name="type" title="传记" value="传记">
                    <input type="checkbox" name="type" title="歌舞" value="歌舞">
                    <input type="checkbox" name="type" title="黑色电影" value="黑色电影">
                    <input type="checkbox" name="type" title="短片" value="短片">
                    <input type="checkbox" name="type" title="记录片" value="记录片">
                    <input type="checkbox" name="type" title="其他" value="其他">
                </div>
            </div>
            <!-- 首映地区 -->
            <div class="layui-form-item">
                <label class="layui-form-label">首映地区</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="area" title="中国大陆" value="中国大陆">
                    <input type="checkbox" name="area" title="美国" value="美国">
                    <input type="checkbox" name="area" title="韩国" value="韩国">
                    <input type="checkbox" name="area" title="日本" value="日本">
                    <input type="checkbox" name="area" title="中国香港" value="中国香港">
                    <input type="checkbox" name="area" title="中国台湾" value="中国台湾">
                    <input type="checkbox" name="area" title="泰国" value="泰国">
                    <input type="checkbox" name="area" title="印度" value="印度">
                    <input type="checkbox" name="area" title="法国" value="法国">
                    <input type="checkbox" name="area" title="英国" value="英国">
                    <input type="checkbox" name="area" title="俄罗斯" value="俄罗斯">
                    <input type="checkbox" name="area" title="意大利" value="意大利">
                    <input type="checkbox" name="area" title="西班牙" value="西班牙">
                    <input type="checkbox" name="area" title="德国" value="德国">
                    <input type="checkbox" name="area" title="波兰" value="波兰">
                    <input type="checkbox" name="area" title="澳大利亚" value="澳大利亚">
                    <input type="checkbox" name="area" title="伊朗" value="伊朗">
                    <input type="checkbox" name="area" title="其他" value="其他">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">时长</label>
                <div class="layui-input-inline">
                    <input type="text" name="time" placeholder="请输入电影时长" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">分钟</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">上映时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="upDate" class="layui-input" id="test29" placeholder="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">评分</label>
                <div class="layui-input-inline">
                    <input type="text" name="score" placeholder="请输入评分(0-10)" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">票房</label>
                <div class="layui-input-inline">
                    <input type="text" name="count" placeholder="请输入票房" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">电影简介</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入电影简介" class="layui-textarea" name="intro"></textarea>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="movie-addMovie">修改电影</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
    <script src="../../layui/jquery-1.12.4.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script>
        //JavaScript代码区域

        function query(url) {
            const parst = url.split("?");
            if (parst.length == 1) {
                return {};
            }
            const obj = {};
            parst[1].split("&").map(item => item.split("=")).forEach(([p, v]) => {
                obj[p] = decodeURIComponent(v);
            })
            return obj;
        }
        const moviePage = query(location.href);
        $(".imgs i").click(function () {//关闭选中的图片
            $(".imgs img").prop("scr", "");
            $("#txtimg").val("");//清空隐藏框的值
            $(".imgs ").hide();
        })

        layui.use(['form', "layer", "laydate", 'upload'], async function () {
            let form = layui.form;
            var laydate = layui.laydate;
            let upload = layui.upload;
            laydate.render({//上映时间
                elem: '#test29'
                , theme: 'molv'
            });
            // $(".imgs img").prop("src",form.field.poster);

            var uploadInst = upload.render({
                elem: '#btnPoster', //绑定元素
                url: '/api/upload/', //上传接口
                field: "imgfile",
                acceptMime: "image/*",//控制上传文件--图片
                size: 500,//文件大小不能超过500kb
                drag: true,//拖拽上传
                done: function (res) {
                    //上传完毕回调
                    $(".imgs img").prop("src", res.data[0]);
                    $("#txtimg").val(res.data[0]);
                    $(".imgs").show();
                    console.log(res);
                },
                error: function () {
                    //请求异常回调
                    console.log("错误")
                }
            });

            //获取数据
            const movie = await $.getJSON("/api/Movie/" + moviePage.id);
            console.log("mmmmm", movie.data);
            form.val("updateForm", movie.data);
            $(".imgs img").prop("src", movie.data.poster);//海报图赋值4
            //提交
            form.on("submit(movie-addMovie)", function (data) {
                delete data.field.imgfile;

                if (!data.field.poster) {
                    layer.msg("请上传电影海报", {
                        icon: 2,
                    });
                    return;
                }
                console.log(data.field);
                $.ajax({
                    url: "/api/Movie/" + moviePage.id,
                    method: "put",
                    data: data.field
                });
                layer.msg('修改电影成功', {
                    icon: 1,
                    time: 1000
                }, function () {
                    location.href = "../../pages/movieManagement.html";
                });
            });
        });
    </script>
</body>

</html>